<template>
	<view class="memberCenter">
		<!-- <view :style="{backgroundImage: 'url('+imageURL+')'}" class="top">
			<view class="left">
				<image :src="userInfo.wxImg" mode="widthFix"></image>
				<view>{{userInfo.wxName}}</view>
			</view>
			<view class="right">
				<view v-if="userInfo.companyLable !== null">
					<u-button text="充值" @click="toTopUp()"></u-button>
				</view>
			</view>
		</view> -->
		<view :style="{backgroundImage: 'url('+imageURL+')'}" class="top">
			<view class="left">
				<image :src="userInfo.wxImg" mode="widthFix" v-if="userInfo.wxImg"></image>
				<image src="http://applet.atptest.com/c9WsCBqw1719467091124.jpg?v=1719467091295" mode="widthFix" v-else>
				</image>
				<view class="username_container">
					<view class="username">
						{{userInfo.wxName}}
					</view>
					<view class="phone">
						{{filterPhone(userInfo.companyPhone) }}
					</view>
				</view>
			</view>
			<view class="right">
				<view v-if="headUserId">
					<u-button text="充值" @click="toTopUp()"></u-button>
				</view>
			</view>
		</view>

		<u-notice-bar :text="notice"></u-notice-bar>

		<view class="nav">
			<view class="left" @click="swichClick(1)">
				<view style="font-size: 32rpx;">{{userInfo.companyLable!==null?userInfo.balance:0}}</view>
				<view style="font-size: 24rpx;color: rgb(104, 104, 106);">余额</view>
			</view>
			<view class="right" @click="swichClick(0)">
				<view style="font-size: 32rpx;">{{userInfo.couponCount}}</view>
				<view style="font-size: 24rpx;color: rgb(104, 104, 106);">优惠券</view>
			</view>
		</view>

		<view class="main1" v-if="swich">
			<view class="title1">
				<view style="font-size: 32rpx;color: rgb(62, 86, 186);font-weight: 700;">余额记录</view>
			</view>
			<view class="list1" v-for="(item,index) in list1" :key="index" @click="toOrderDetail()">
				<view
					style="display: flex;justify-content: space-between;padding-bottom: 8rpx;border-bottom: 1px dashed rgb(204, 204, 204);">
					<view v-if="item.rechargeCenterType == -1">订单号：{{item.orderNo}}</view>
					<view v-if="item.rechargeCenterType == -1" style="color: rgb(62, 86, 186);">+{{item.totalAmount}}
					</view>

					<view v-if="item.rechargeCenterType == 1">订单号：{{item.orderNo}}</view>
					<view v-if="item.rechargeCenterType == 1" style="color: #CA614E;">-{{item.totalAmount}}</view>

					<view v-if="item.rechargeCenterType == 0">余额充值</view>
					<view v-if="item.rechargeCenterType == 0" style="color: rgb(62, 86, 186);">{{item.amount}} +
						{{item.giftAmount}}
					</view>
				</view>
				<view
					style="display: flex;justify-content: space-between;align-items: center;color: rgb(183, 183, 183);padding-top: 10rpx;font-size: 12px;">
					<text v-text="item.rechargeCenterType == -1?'退款':''"
						style="color: rgb(62, 86, 186);font-size: 700;"></text>
					<text>{{item.createTime}}</text>
				</view>
			</view>
			<view v-if="list1.length < 1" class="noOrder" style="font-size: 18px;">
				<u-divider text="您没有余额记录"></u-divider>
			</view>
		</view>

		<!-- 优惠券列表信息 -->
		<view class="main2" v-else>
			<view class="title">
				<view style="font-size: 32rpx;color: rgb(62, 86, 186);font-weight: 700;">优惠券</view>
			</view>
			<view v-for="(item,index) in list2" :key="index" class="list2">
				<view class="top2">
					<view style="display: flex;align-items: center;">
						<image style="width: 110rpx;padding-right: 24rpx;" :src="item.coupon.backImg" mode="widthFix">
						</image>
						<view>
							<view style="font-weight: 700;font-size: 32rpx;">{{item.coupon.name}}</view>
							<view style="font-size: 28rpx;color: #CA614E;margin-top: 12rpx;">
								{{ item.expireTime.split(/\s+/)[0] }}到期
							</view>
						</view>
					</view>
					<view style="text-align: right;">
						<view style="font-size: 26rpx;color: #3E56BA;">
							<text v-if="item.coupon.amount">￥</text>
							<text v-if="item.coupon.amount" style="font-size: 48rpx">{{item.coupon.amount}}</text>
						</view>
						<view style="font-size: 28rpx;color: #666263;" v-if="item.coupon.couponType==0">
							满{{item.coupon.useAmount}}可用
						</view>
						<view style="font-size: 28rpx;color: #666263;" v-if="item.coupon.couponType==1">无门槛</view>
					</view>
				</view>
				<view class="bottom2">
					<view style="font-size: 22rpx;color: #B7B7B7;" v-if="item.coupon.couponType==0">可与相同满减券叠加使用</view>
					<view style="font-size: 22rpx;color: #B7B7B7;" v-if="item.coupon.couponType==1">
						无限制使用，现金券{{item.coupon.limitDay}}天只能使用{{item.coupon.limitCount}}张</view>
					<view style="font-size: 22rpx;color: #B7B7B7;"
						v-if="item.coupon.couponType==2 && item.coupon.limitCount > 0">
						仅限外观检测使用，{{item.coupon.limitDay}}天只能使用{{item.coupon.limitCount}}张</view>
					<view style="width: 100%; display: flex;justify-content: flex-end;">
						<view v-if="item.coupon.isForwarding" style="margin-right: 18rpx;">
							<u-button open-type="share" @click="getId(item)" text="分享"></u-button>
						</view>
						<view>
							<u-button @click="toOrder(item.coupon.freeItems)" text="去使用"></u-button>
						</view>
					</view>
				</view>
			</view>
			<view v-if="list2.length < 1" class="noOrder" style="font-size: 18px;">
				<u-divider text="您没有优惠券"></u-divider>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex' // vuex
	import {
		Find,
		FindBalanceRecords
	} from '../../../api/balance.js'
	import {
		GetUserInfo,
		createIDForCoupon,
		GetBroadcastOpen
	} from '../../../api/user.js'
	export default {
		data() {
			return {
				swich: 1,
				pageIndex: 1,
				pageSize: 10,
				imageURL: "http://applet.atptest.com/23042304.jpg",
				notice: '开业充值余额满2000送300，满4000送800，满6000送2000，满12000送5000！！',
				list1: [],
				list2: [],
				currntItem: {},
				currentCode: '',
				headUserId: null,//用于判断是否是公司员工
			};
		},
		methods: {
			...mapMutations('user', ['setUserInfo']),

			toTopUp() {
				uni.navigateTo({
					url: "/pagesB/pages/topUp/topUp"
				})
			},
			swichClick(i) {
				this.swich = i
				this.pageIndex = 1
				if (i) {
					this.list1 = []
					this.getFindBalanceRecords({
						pageIndex: this.pageIndex,
						pageSize: this.pageSize,
					})
				} else {
					this.list2 = []
					this.getFind({
						pageIndex: this.pageIndex,
						pageSize: this.pageSize,
					})
				}
				this.getUserInfo()
			},
			toOrderDetail() {
				console.log('订单详情');
			},
			//优惠券列表
			async getFind(data) {
				const res = await Find(data)
				this.list2 = this.list2.concat(res.items)
			},
			//余额流水列表
			async getFindBalanceRecords(data) {
				const res = await FindBalanceRecords(data)
				this.list1 = this.list1.concat(res.items)
			},
			// 获取用户信息
			getUserInfo() {
				GetUserInfo().then((res) => {
					if (res.wxImg == null || res.wxName == null) {
						uni.redirectTo({
							url: "/pagesB/pages/mineInfo/mineInfo"
						})
					} else {
						this.setUserInfo(res)
					}
					this.headUserId = res.headUserId;
				})
			},
			
			//手机号过滤处理
			filterPhone(val) {
				if (val) {
					return val.substr(0, 3) + '****' + val.substr(7, val.split('').length);
				} else {
					return "";
				}
			},

			// 获取分享的user标识
			_createIDForCoupon(e) {
				return new Promise((resolve, reject) => {
					createIDForCoupon({
						url: `/api/CouponPerson/Forwarding?couponPersonId=${e.id}`
					}).then(res => {
						if (res.code) {
							this.currentCode = res.code
							resolve(res.code)
						} else {
							return uni.showToast({
								title: 'code获取为空',
								icon: 'error'
							})
						}
					})

				})
			},

			// 获取当前点击的item的对象
			getId(item) {
				this.currntItem = item
			},

			//自定义分享 当前只针对自定义分享时触发的情况，如果时点击小程序自带三个点分享页面的，需根据e来判断点击类型进行分享操作！
			async onShareAppMessage(e) {
				const code = await this._createIDForCoupon(this.currntItem)
				this.currentCode = code
				return {
					title: '点击获得优惠券',
					path: `/pages/home/home?code=${this.currentCode}`,
					desc: '把自己的优惠券转发给好友',
					imageUrl: 'http://applet.atptest.com/X5d5hjX71683189810982.jpg',
				}
			},

			// 跳转到下单页面
			toOrder(couponItem) {
				// let couponIds = couponItem.map(item => {
				// 	return item.commodityId
				// })
				// console.log("couponIds",couponIds);
				// uni.navigateTo({
				// 	url: `/pagesA/pages/testReal/testReal?couponIds=${JSON.stringify(couponIds)}`
				// })
				uni.navigateTo({
					url: `/pagesA/pages/testRealNew/testRealNew`
				})
			},
			// 获取广播
			async _GetBroadcastOpen() {
				const res = await GetBroadcastOpen()
				if (res.code == 400) {
					this.notice = ''
				} else {
					this.notice = res
				}
			}
		},
		computed: {
			...mapState('user', ['userInfo']) // vuex
		},
		onShow() {

			this.pageIndex = 1
			this.list1 = []
			this.list2 = []

			this._GetBroadcastOpen()

			this.getUserInfo()

			this.getFindBalanceRecords({
				pageIndex: this.pageIndex,
				pageSize: this.pageSize,
			})
			this.getFind({
				pageIndex: this.pageIndex,
				pageSize: this.pageSize,
			})
		},

		onLoad(options) {
			this.pageIndex = 1
			this.swich = Number(options.state)
		},

		onReachBottom() {
			this.pageIndex++
			if (this.swich) {
				this.getFindBalanceRecords({
					pageIndex: this.pageIndex,
					pageSize: this.pageSize,
				})
			} else {
				this.getFind({
					pageIndex: this.pageIndex,
					pageSize: this.pageSize,
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	.memberCenter {
		padding-bottom: 30rpx;

		.top {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 50rpx;
			height: 240rpx;
			background-size: 100%;
			color: #fff;
			box-sizing: border-box;

			.left {
				display: flex;
				align-items: center;

				image {
					width: 120rpx;
					border-radius: 50%;
					margin-right: 20rpx;
				}

				.username_container {
					.username {
						font-size: 36rpx;
						font-weight: 600;
					}

					.phone {
						font-size: 24rpx;
						margin-top: 5rpx;
					}
				}
			}
		}

		.nav {
			display: flex;
			align-items: center;
			height: 130rpx;
			background: rgb(255, 255, 255);
			box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.25);

			.left {
				width: 50%;
				text-align: center;
				border-right: 1px solid rgb(230, 230, 230);
			}

			.right {
				width: 50%;
				text-align: center;
			}
		}

		.main1 {
			margin: 30rpx 22rpx 0;

			.title1 {
				display: flex;
				justify-content: space-between;
			}

			.list1 {
				background-color: #fff;
				border-radius: 8rpx;
				padding: 16rpx 24rpx;
				margin-top: 24rpx;
				box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.25);
			}
		}

		.main2 {
			margin: 30rpx 22rpx 0;

			.list2 {
				height: 244rpx;
				margin-top: 10rpx;
				padding: 0 22rpx;
				border-radius: 8rpx;
				background-color: #fff;
				box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.25);

				.top2 {
					display: flex;
					justify-content: space-between;
					align-items: center;
					height: 62%;
					border-bottom: 1px dashed #ededed;
				}

				.bottom2 {
					display: flex;
					align-items: center;
					justify-content: space-between;
					height: 35%;
				}
			}
		}

		.noOrder {
			display: flex;
			justify-content: center;
			margin-top: 200rpx;
			color: #7d7e7f;
		}
	}

	/deep/ .u-button--info {
		color: #fff !important;
		background-color: #4058bb !important;
		border-color: #4058bb !important;
	}

	/deep/ .u-button {
		height: 50rpx !important;
	}

	/deep/ .u-button--normal {
		padding: 2rpx 24rpx !important;
	}

	/deep/ .u-button--square {
		border-bottom-left-radius: 25rpx !important;
		border-bottom-right-radius: 25rpx !important;
		border-top-left-radius: 25rpx !important;
		border-top-right-radius: 25rpx !important;
	}
</style>